<template>
	<!-- http://localhost:5173/#/pages/digest_test/digest_test?projectId=1 -->
	<view>
		<view class="card">
			<view style="flex:1">
				<view class="line">
					<text>开始时间：{{projectInfo.startDate}}</text>
				</view>
				<view class="line">
					<text>结束时间：{{projectInfo.endDate}}</text>
				</view>
				<button open-type="share" class="digest_button" type="default">
					<image src="../../assets/icons/share.png" class="icon_image_share"></image>
				</button>
				<view class="line">
					<text>项目描述：{{projectInfo.description}}</text>
				</view>
				<view class="status">
					{{projectInfo.status}}
				</view>
			</view>
		</view>

		<task-card v-for="(task, index) in this.tasks" v-show="task && task.pid === null" :key="task.taskId"
			:task="task" :color="taskColors[task.status]" :projectId="projectInfo.projectId"
			:endDate="projectInfo.endDate" />

		<movable-fab :url="movableFabUrl"></movable-fab>
	</view>
</template>

<script>
	import api from "../../api/api.js"
	import TaskCard from "../../component/TaskCard.vue"
	import MovableFab from "../../component/movable_fab.vue"
	export default {
		components: {
			TaskCard,
			MovableFab
		},
		data() {
			return {
				tasks: [],
				dictionary: [], // 前端缓存的数据字典，减少重复的后端请求
				movableFabUrl: "",
				projectInfo: {
					projectId: "",
					startDate: "",
					endDate: "",
					description: "",
					status: ""
				},
				taskColors: {
					"进行中": "#edf7f8",
					"已完成": "#e8fde0",
					"已超期": "#d9d9d9",
					"已取消": "#fff8e0"
				}
			};
		},
		methods: {
			// 翻译数据字典
			async dictionaryInterpret(code) {
				const target = this.dictionary.find(item => item.id === code);

				if (target) {
					// 如果在缓存字典中找到对应项，直接更新 status
					return target.value;
				} else {
					// 如果缓存中没有，发起异步请求并缓存结果
					const res2 = await api.dictionaryValueSearchById({
						dictionaryId: code
					});
					this.dictionary.push({
						id: code,
						value: res2.data.data
					});
					return res2.data.data; // 返回新获取的值
				}
			}
		},
		onLoad(options) {
			this.projectInfo.projectId = Number(options.projectId);
			this.tasks = [];
			this.dictionary = [];
			// 从后端搜索项目基本信息
			// console.log(Number(this.projectInfo.projectId));
			api.projectSearchById({
				projectId: this.projectInfo.projectId
			}).then(async (res) => {
				this.projectInfo = {
					projectId: res.data.data.projectId,
					projectName: res.data.data.projectName,
					startDate: res.data.data.startDate,
					endDate: res.data.data.endDate,
					description: res.data.data.description,
					status: res.data.data.status
				};
				this.projectInfo.status = await this.dictionaryInterpret(this.projectInfo.status);
				// 将项目基本信息体现到跳转task_create的url里面
				this.movableFabUrl =
					`/pages/task_create/task_create` +
					`?projectId=${this.projectInfo.projectId}` +
					`&endDate=${this.projectInfo.endDate}` +
					`&editOrCreate='create'`;
				// 更新导航栏标题
				uni.setNavigationBarTitle({
					title: this.projectInfo.projectName
				})
			});
			// 从后端把所有任务搜出来并建立树形结构
			// console.log(Number(this.projectInfo.projectId));
			api.taskSearchAll({
				projectId: this.projectInfo.projectId
			}).then(async (res) => {
				// 搜出任务
				const taskData = res.data.data.map(task => ({
					taskId: task.taskId,
					taskName: task.taskName,
					description: task.description,
					status: task.status,
					pid: task.pid,
					dueDate: task.dueDate,
					sons: [],
					users: []
				}));
				this.tasks.push(...taskData);
				// 与父任务建立关联
				this.tasks.forEach((task, index) => {
					const parentTask = this.tasks.find(parent => parent.taskId === task.pid);
					if (parentTask) parentTask.sons.push(task);
				});
				// 翻译数据字典（通用代码）
				for (const task of this.tasks) {
					task.status = await this.dictionaryInterpret(task.status);
				}
				// 去搜索任务负责人的头像字符串（应当采用并发而不是一个一个查）
				Promise.all(
					this.tasks.map(task =>
						api.searchUserProfilesByTaskId({
							taskId: task.taskId
						})
					)
				).then(results => {
					results.forEach((res2, index) => {
						this.tasks[index].users.push(...res2.data.data)
					});
				})
			})
		},
		onShareAppMessage() {
			return {
				title: this.projectInfo.projectName,
				path: `pages/digest_test_share/digest_test_share` + 
				`?projectId=${this.projectInfo.projectId}`
			}
		}
	}
</script>

<style>

	.card {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		background-color: #e6ffe6;
		border-radius: 10px;
		margin: 20px;
		position: relative;
	}

	.line {
		margin-bottom: 5px;
	}

	.status {
		display: flex;
		align-items: center;
		color: #666;
		margin-top: 10px;
	}

	.status::before,
	.status::after {
		content: "";
		flex: 1;
		border-bottom: 1px solid #666;
		margin: 0 10px;
	}

	.digest_button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: rgba(0, 0, 0, 0) !important;
		position: absolute;
		top: 15px;
		right: 15px;
	}
	
	.icon_image_share{
		width: 25px;
		height: 25px;
	}

	.digest_button::after {
		border: none;
	}
</style>